<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @closed="close">
    <el-form :model="form" :rules="rules">
      <imgUrl @transImg="transImg" :img="img"></imgUrl>

      <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item
        label="项目地址"
        :label-width="formLabelWidth"
        prop="productUrl"
      >
        <el-input v-model="form.productUrl" autocomplete="off" />
      </el-form-item>

      <el-form-item label="班级" :label-width="formLabelWidth" prop="class">
        <el-input v-model="form.class" autocomplete="off" />
      </el-form-item>
      <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
        <el-input v-model="form.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="城市" :label-width="formLabelWidth" prop="city">
        <el-input v-model="form.city" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学历" :label-width="formLabelWidth" prop="degree">
        <el-input v-model="form.degree" autocomplete="off" />
      </el-form-item>
      <el-form-item
        label="描述"
        :label-width="formLabelWidth"
        prop="description"
      >
        <el-input v-model="form.description" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confimClick">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { reactive, ref, toRefs, watchEffect } from 'vue';
import imgUrl from './imgurl/index.vue';
import { useDiaLog } from '../../store/DiaLog';
import { storeToRefs } from 'pinia';
import * as api from '../../api/vip';
import { ElMessage } from 'element-plus';
//接收父组件的标题
let props = defineProps({
  actionType: {
    type: String,
    // required: true,
    default() {
      return 'add';
    }
  },
  title: {
    type: String,
    // required: true,
    default() {
      return '增加学员';
    }
  },
  //接收父组件刷新列表的请求
  getReloadList: {
    type: Function
  },
  returned: {
    type: Object,
    default() {
      return null;
    }
  }
});
let { title, actionType } = toRefs(props);
//声明sid修改学员信息的必传参数
let sId = ref();
let DiaLogStore = useDiaLog();
const dialogTableVisible = ref(false);
let { dialogFormVisible } = storeToRefs(DiaLogStore);
// const dialogFormVisible = ref(true);
const formLabelWidth = '140px';

const form = reactive({
  class: '',
  name: '',
  age: '',
  city: '',
  degree: '',
  productUrl: '',
  description: '',
  headimgurl: ''
});
//声明img显示隐藏变量 传过去
let img = ref();
//侦听传过来的回显数据
watchEffect(() => {
  if (props.returned) {
    // console.log(returned);
    img.value = props.returned.headimgurl;
    sId.value = props.returned.sId;
    Object.keys(form).forEach((key) => {
      form[key] = props.returned[key];
    });
  }
});
//表单校验规则
const rules = reactive({
  name: [{ required: true, validator: '姓名不能为空', trigger: 'blur' }],
  class: [{ required: true, validator: '班级不能为空', trigger: 'blur' }],
  age: [{ required: true, validator: '年龄不能为空', trigger: 'blur' }],
  city: [{ required: true, validator: '城市不能为空', trigger: 'blur' }],
  degree: [{ required: true, validator: '学历不能为空', trigger: 'blur' }],
  productUrl: [
    { required: true, validator: '项目地址不能为空', trigger: 'blur' }
  ],
  description: [{ required: true, validator: '描述不能为空', trigger: 'blur' }]
});

//声明方法 接收 子组件的图片路径
let transImg = (imgurl) => {
  // console.log(imgurl);
  form.headimgurl = imgurl;
  // console.log(form.headimgurl);
};
//点击确定提交之后的逻辑

//有两种情况,当点击的是add时  和当点击的是edit时
let confimClick = async () => {
  //点击提交时获取form里的数据
  switch (actionType.value) {
    case 'add':
      //如果走的是添加项目这里 发起添加学员的请求
      try {
        let res = await api.addStuListApi(form);
        //添加成功关闭dialog
        dialogFormVisible.value = false;
        // img.value = false;

        //添加项目成功以后还需调用刷新表格的请求也就是获取列表请求
        props.getReloadList();
        ElMessage.success(res.data.msg);
        // console.log(res);
      } catch (e) {
        ElMessage.error(res.data.msg);
      }
      break;
    case 'edit':
      try {
        //点击编辑发送修改信息请求
        let data = { ...form };
        // sId.value = data.sId;
        data.sId = sId.value;
        let res = await api.editStuApi(data);
        // console.log(res);
        // 修改信息完成需要刷新表格
        props.getReloadList();
        //关闭dailog
        dialogFormVisible.value = false;
      } catch (e) {}
  }
};
//关闭对话框的事件
let close = () => {
  Object.keys(form).forEach((key) => {
    form[key] = '';
  });
  img.value = '';
};
</script>
<style scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
